
// 表格渲染
var key = []
var value = []
// 相当于value数组的下标，用来控制换行
var rol = 0
// 用来记录一行有多少列
var rolnumber
var maxpage
var mydata
var dangqian = 1
var fenyeshu = 5
// 参数1：列；参数2：需要渲染的数组
function showTable(rolnum, showdata) {
    rolnumber = rolnum
    maxpage = Math.ceil(showdata.length / fenyeshu)
    gopage(dangqian, showdata)
    pagebutn(showdata)
}
function show(rolnum, showdata) {
    // 抽取数组元素
    showdata.forEach(item => {
        for (var i in item) {
            key.push(i)
            value.push(item[i])
        }
    });
    for (let j = 1; j <= showdata.length; j++) {
        $('#mytbody').append(`
        <tr>
        </tr>
        `)
        mytd(rol, j)
    }
    // console.log(rol);
    // 这是键
    // console.log(key);
    // 这是值
    // console.log(value);
}
// 判断是否该换行
// 参数1：相当于value数组的下标，用来控制换行，参数2：相当于行的下标
function mytd(num, rownum) {
    for (let k = rol; k < num + rolnumber; k++) {
        $(`#mytbody>tr:nth-of-type(${rownum})`).append(`
        <td>${value[k]}</td>
        `)
        rol++
    }
}
// 分页
// 有多少页
// 参数1：渲染第几页，参数2：这是一个数组，将这个数组切五行
function gopage(pagenum, showdata) {
    $('#mytbody').html('')
    let star = (Number(pagenum) - 1) * fenyeshu
    var pagearry = showdata.slice(star, star + fenyeshu)
    show(rolnumber, pagearry)
    mysepcil()
}
//渲染分页按钮,参数用到数组
function pagebutn(showdata,) {
    $('#pagebut').html('')
    $('#pagebut').append(`<button data-page='shang'><span class="iconfont icon-xiangzuo" ></span></button>`)
    for (var i = 1; i <= maxpage; i++) {
        $('#pagebut').append(`<button data-page='${i}' class='mybut'>${i}</button>`)
    }
    $('#pagebut').append(`<button data-page='xia'><span  class="iconfont icon-xiangyou1"></span></button>`)
    $('#pagebut').append(`<p>共${showdata.length}条记录 第${dangqian}/${maxpage}页</p>`)
    //     $('#pagebut').append(`<select name="" id="fenyeyema" class="yejiao yejiaofen">
    //     <option value="5" class="op">5条/页</option>
    //     <option value="10" class="op">10条/页</option>
    //     <option value="15" class="op">15条/页</option>
    //     <option value="20" class="op">20条/页</option>
    // </select>`)
    $('#pagebut').children().eq(dangqian).css({
        backgroundColor: '#1890FF',
        color: 'white'
    })
    $('#pagebut').on('click', 'button', function () {
        // console.log($(this).parent().children().eq(dangqian))
        key = []
        value = []
        rol = 0
        var x = $(this).attr('data-page')
        if (x == 'shang') {
            // console.log(dangqian)
            // $(this). unbind( ' click ' )
            if (dangqian != 1) {
                dangqian--
                // console.log(dangqian)
                gopage(dangqian, showdata)
            }
        }
        else if (x == 'xia') {
            if (dangqian < maxpage) {
                dangqian++
                // console.log(dangqian)
                gopage(dangqian, showdata)
            }
        } else {
            x = parseInt(x)
            gopage(x, showdata)
            dangqian = x
        }
        $(this).parent().children().css({
            backgroundColor: 'white',
            color: 'black'
        })
        $(this).parent().children().eq(dangqian).css({
            backgroundColor: '#1890FF',
            color: 'white'
        })
        $("#pagebut p").remove()
        $('#pagebut').append(`<p>共${showdata.length}条记录 第${dangqian}/${maxpage}页</p>`)
    })
    // console.log(dangqian);
    console.log(dangqian);

}
//切数据
var querydata = []
function cutdata(oldarray, newarray, start, stop, num) {
    oldarray.forEach(item => {
        var xx = []
        var yy = []
        for (var i in item) {
            yy.push(i)
            xx.push(item[i])
        }
        for (var x = xx.length; x > stop; x--) {
            yy.splice(stop, 1)
            xx.splice(stop, 1)
        }
        for (var j = 1; j < start; j++) {
            yy.splice(0, 1)
            xx.splice(0, 1)
        }
        if (num == 1) {
            let y = []
            for (var i = 0; i < xx.length; i++) {
                y.push(yy[i])
                y.push(xx[i])
            }
            newarray.push(y)
        } else {
            let y = {}
            for (var i = 0; i < xx.length; i++) {
                y[yy[i]] = xx[i]
            }
            newarray.push(y)
        }
    })
}
//合数据
function comdata(array1, array2, newarray2) {
    var mid = []
    for (var i = 0; i < array2.length; i++) {
        var xx = []
        var yy = []
        let y = {}
        mid = array1[i].concat(array2[i])
        mid.forEach((item, index) => {
            if (index % 2 == 0) {
                yy.push(item)
            }
            else {
                xx.push(item)
            }
            for (var i = 0; i < xx.length; i++) {
                y[yy[i]] = xx[i]
            }
        })
        newarray2.push(y)
    }
}
//获取数据
function getset(mydata, mydata2) {
    let newdata = getmyData(mydata2)
    if (newdata == null) {
        setmyData(mydata2, mydata)
        newdata = getmyData(mydata2)
    }
    return newdata
}
//下拉框选择分页页数
// $('#fenyeyema').change(function(){
//     let tiao = $('#fenyeyema').val()
//     fenyeshu = parseInt(tiao)
//     // show(dangqian)
//     // showTable(rolnum, showdata)
//     console.log(fenyeshu)
// })
//取消修改分页条数后的select的焦点轮廓
$("select").on("focus", function (e) {
    $(this).css({ "outline": "none" })
})
$("input").on("focus", function (e) {
    $(this).css({ "outline": "none" })
})
function selfenye(rolnum, showdata) {
    let tiao = $('#fenyeyema').val()
    fenyeshu = parseInt(tiao)
    showTable(rolnum, showdata)
    // gopage(pagenum, showdata)
    // pagebutn(showdata)
}
// return newdata
// 判断是否登录
// let myuser = getmyData('user')
// console.log(myuser)
// if (myuser == null) {
//     location.href = '../denglu.html'
// }
